<template>
  <iframe-sortable-container>
    <div class="vi-canvas" ref="viCanvas">
      <vi-draggable>
        <draggable-container
          v-for="componentDefinitionItem in tree"
          :key="componentDefinitionItem.key"
          :componentDefinition="componentDefinitionItem"
        />
      </vi-draggable>

    </div>
  </iframe-sortable-container>

</template>
<script>
import DraggableContainer from './draggleComponent/draggableContainer'
import IframeSortableContainer from '../Draggable/iframeSortableContainer'
import ViDraggable from '../Draggable/ViDraggable'
export default {
  name: 'draggableCanvas',
  components: {ViDraggable, IframeSortableContainer, DraggableContainer},
  data () {
    return {
      tree: [
        {
          'text':'按钮',
          'icon':'buttons',
          'componentName':'a-button',
          'componentType':'thirdparty',
          'path':'base',
          'key':'1c36b35',
          'children':[
            {
              'slotName':'default',
              'key':'381d275',
              'defaultEnableSlot':true,
              'slotContentText':'按钮',
              'slotTip':'内容区域',
              'componentName':'template'
            }]
        },
        {
          'text':'按钮2',
          'icon':'buttons',
          'componentName':'a-button',
          'componentType':'thirdparty',
          'path':'base',
          'key':'1c36b352',
          'children':[
            {
              'slotName':'default',
              'key':'381d2752',
              'defaultEnableSlot':true,
              'slotContentText':'按钮',
              'slotTip':'内容区域',
              'componentName':'template'
            }]
        }
      ]
    }
  },
  methods: {
    test () {
      event.preventDefault()
      console.log('drag over')
    }
  }
  // mounted() {
  //   // this.$refs.viCanvas.ondragover = function () {
  //   //   console.log('3333')
  //   // }
  //   // document.addEventListener('mousemove', (e) => {
  //   //   console.log(e.type);
  //   //   if (e.target.classList.contains('list-group-item')) {
  //   //     e.target.dispatchEvent(
  //   //       new DragEvent('dragover', { clientY: e.clientY, bubbles: true }) ); // 用mousemove代替
  //   //   }
  //   // })
  //   const ops = {
  //     group: 'shared',
  //     animation: 1000,
  //     supportPointer: true,
  //     // crossEl: window.parent.document,
  //     onMove: function (evt, originalEvent) {
  //       /*
  //           evt.dragged; // 被拖拽的对象
  //           evt.draggedRect; // 被拖拽的对象所在区域 {left, top, right, bottom}
  //           evt.related; // 被替换的对象
  //           evt.relatedRect; // DOMRect
  //           evt.willInsertAfter; // 是在被替换对象的前面还是后面
  //           originalEvent.clientY; // 鼠标的位置
  //           */
  //       // console.log('onMove', evt)
  //       // return false 将来取消拖拽;
  //       return true
  //     },
  //     //拖动结束
  //     onEnd: function (evt) {
  //       // console.log(evt);
  //       //获取拖动后的排序
  //       // let arr = sortable.toArray()
  //       // alert(JSON.stringify(arr))
  //     },};
  //   //初始化
  //   const sortable = new Sortable(this.$refs.viCanvas, ops)
  //   // window.parent.document.getElementById('app').ondragstart = (ev) => {
  //   //
  //   //   // let dt = ev.dataTransfer
  //   //   //
  //   //   // dt.setData( 'Text', ev.target.textContent)//将拖拽组件ID传入
  //   //   // document.ondragover = (e) => {
  //   //   //   console.log(e.target)
  //   //   // }
  //   // }
  // }
}
</script>
<style scoped lang="less">
    .vi-canvas {
        height: 100%;
      user-select: none;
    }
</style>
